<script lang="ts" setup>
import {ref} from "vue";

defineOptions({
  name: "PageDialog"
});

const dialogVisible = ref(false)
const loading = ref(false)
defineExpose({
  dialogVisible
})

/**-------------------参数-------------------**/
const {title,width,modal,draggable,closeOnClickModal,closeOnPressEscape,handlerConfirm,handlerCancel,buttons} = defineProps({
  title:{
    type: String,
    required:true
  },
  width:{
    type: String || Number,
    default: '50%'
  },
  modal:{
    type: Boolean,
    default: true
  },
  draggable:{
    type: Boolean,
    default: true
  },
  closeOnClickModal:{
    type: Boolean,
    default: false
  },
  closeOnPressEscape:{
    type: Boolean,
    default: false
  },
  handlerConfirm:{
    type: Function,
    default: ()=>{}
  },
  handlerCancel:{
    type: Function,
    default: ()=>{}
  },
  buttons: {
    type:Array,
    default: ()=> ['cancel','confirm']
  }
})

/**-------------------事件回调-------------------**/
//取消
const dialogCancel = async ()=>{
  loading.value = true
  try{
    await handlerCancel()
  }finally {
    loading.value = false
  }
}
//确定
const dialogConfirm = async ()=>{
  loading.value = true
  try{
    await handlerConfirm()
  }finally {
    loading.value = false
  }
}
</script>

<template>
  <div>
    <el-dialog
      v-if="dialogVisible"
      v-model="dialogVisible"
      :before-close="dialogCancel"
      :close-on-click-modal="closeOnClickModal"
      :close-on-press-escape="closeOnPressEscape"
      :draggable="draggable"
      :modal="modal"
      :title="title"
      :width="width"
      destroy-on-close
    >
      <slot />
      <template #footer>
        <div class="dialog-footer">
          <el-button v-if="buttons.includes('cancel')" :loading="loading" @click="dialogCancel">取消</el-button>
          <slot name="button" />
          <el-button v-if="buttons.includes('confirm')" :loading="loading" type="primary" @click="dialogConfirm">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<style lang="scss" scoped>
:deep(.el-dialog) {

  .el-dialog__body {
    max-height: 50vh;
    overflow-y: auto;
    padding: 3vh !important;
  }
}
</style>
